<template>
  <div style="position: relative;">
    <slot />
    <div id="1684910106891" />
  </div>

</template>
<script>
import Watermark from './watermark.js'
export default {
  name: 'ZWatermark',
  props: {
    typeConfig: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      watermark: null
    }
  },
  watch: {
    title: {
      handler: function() {
        if (this.watermark) {
          this.watermark.destroy()
          this.watermark.init(this.title, this.subTitle)
        }
      },
      immediate: true
    },
    subTitle: {
      handler: function() {
        if (this.watermark) {
          this.watermark.destroy()
          this.watermark.init(this.title, this.subTitle)
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.watermark = new Watermark(this.typeConfig)
    this.watermark.init(this.title, this.subTitle)
  },
  beforeUnmount() {
    this.watermark.destroy()
  }
}
</script>
